<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240)"
      title="分销商详情"
      :ghost="false"
      @back="() => $router.go(-1)"
    >
      <div class="user">
        <img :src="userInfo.avatar_url" alt="" />
        <span>{{ userInfo.nickname }}</span>
      </div>
      <template slot="extra">
        <!-- <a-button @click="showCommons"> 备注 </a-button> -->
        <a-button @click="qrcode"> 二维码 </a-button>
      </template>
      <template slot="footer">
        <a-tabs v-model="current" @change="changeTab">
          <a-tab-pane key="1" tab="分销信息" />
          <a-tab-pane key="2" tab="分销提现" />
          <a-tab-pane key="3" tab="分销订单" />
        </a-tabs>
      </template>
      <div class="content">
        <div class="main">
          <a-descriptions size="small" :column="2">
            <a-descriptions-item label="用户姓名"> {{ userInfo.name }} </a-descriptions-item>
            <a-descriptions-item label="推荐人">
              {{ userInfo.parent_name }}
              <a-button size="small" type="primary" @click="editParentModal = true">
                切换推荐人
              </a-button>
            </a-descriptions-item>
            <a-descriptions-item label="手机号"> {{ userInfo.binding }} </a-descriptions-item>
            <a-descriptions-item label="审核时间"> {{ userInfo.create_time }} </a-descriptions-item>
            <a-descriptions-item label="备注">{{ userInfo.seller_comments }}</a-descriptions-item>
          </a-descriptions>
        </div>
        <div class="extra">
          <div
            :style="{
              display: 'flex',
              width: 'max-content',
              justifyContent: 'flex-end',
            }"
          >
            <a-statistic
              title="可提佣金"
              :value="userInfo.price"
              prefix="￥"
              :style="{
                marginRight: '32px',
              }"
            />
            <a-statistic title="累计佣金" prefix="￥" :value="userInfo.total_price" />
          </div>
        </div>
      </div>
    </a-page-header>
    <div class="body">
      <a-card title="分销信息" v-if="current == 1 && userInfo.level_info">
        <a-descriptions size="small" :column="1">
          <a-descriptions-item label="分销下级"> {{ userInfo.level_info.level_count || 0 }}人 </a-descriptions-item>
        </a-descriptions>
        <a-descriptions size="small" :column="3">
          <a-descriptions-item label="一级分销"> {{ userInfo.level_info.first || 0 }}人 </a-descriptions-item>
          <a-descriptions-item label="二级分销"> {{ userInfo.level_info.second || 0 }}人 </a-descriptions-item>
          <a-descriptions-item label="三级分销"> {{ userInfo.level_info.third || 0 }}人 </a-descriptions-item>
        </a-descriptions>
      </a-card>
      <a-card title="分销提现" v-if="current == 2">
        <a-table
          :rowKey="
            (r, i) => {
              return i
            }
          "
          :pagination="{
            current: this.queryParam.pageNo,
            total: this.totalCount,
            showSizeChanger: false,
            onChange: this.tablePageChange,
          }"
          :columns="cashColumns"
          :data-source="cashList"
        >
          <span slot="method" slot-scope="text">
            提现到
            {{ text == 0 ? '微信' : text == 1 ? '支付宝' : text == 2 ? '银行卡' : text == 3 ? '余额' : '' }}
          </span>
          <div slot="status" slot-scope="scope">
            <div class="status">
              <span>{{
                scope.status == 0
                  ? '申请中'
                  : scope.status == 1
                  ? '确认申请'
                  : scope.status == 2
                  ? '已打款'
                  : scope.status == 3
                  ? '驳回'
                  : scope.status == 4
                  ? '手动打款'
                  : scope.status == 5
                  ? '余额通过'
                  : ''
              }}</span>
            </div>
          </div>
          <span slot="price" slot-scope="text"> ￥{{ text }} </span>
          <span slot="service_money" slot-scope="text"> ￥{{ text }} </span>
          <span slot="money" slot-scope="text"> ￥{{ text }} </span>
        </a-table>
      </a-card>
      <a-card title="分销订单" v-if="current == 3">
        <ListTable ref="listTable" :list_th="list_th" :pagaData="orderList"> </ListTable>
        <a-pagination v-model="queryParam.pageNo" :total="totalCount" @change="tablePageChange" v-if="totalCount > 0" />
      </a-card>
    </div>
    <a-modal v-model="qrcode_visiable" title="分销二维码" :footer="null">
      <img :src="qrcode_img" />
    </a-modal>
    <a-modal v-model="comments_visiable" @ok="setComments" title="添加备注">
      <a-textarea
        v-model="seller_comments"
        :auto-size="{ minRows: 2, maxRows: 4 }"
      />
    </a-modal>
    <a-modal
      title="切换推荐人"
      style="width: 300px"
      :destroyOnClose="true"
      v-model="editParentModal"
      size="small"
      @cancel="onCancel"
      @ok="handleEditParentConfirm"
      :confirmLoading="confirmLoading"
    >
      <SelectUer
        @userInfo="onSelectUser"
        @setParentHead="onSetHead"
        :showHeadButton="true"
        dataType="single"
        returnType="info"
        :defaultUser="userInfo.parent_id"
      >
      </SelectUer>
    </a-modal>
  </div>
</template>

<script>
import ListTable from './components/ListTable'
import { getDetail, getOrder, getCash, detailSetComments, getQrcode } from '@/api/share'
import { setParent } from '@/api/user'
import SelectUer from '@/components/SelectUser/SelectUser1'
const cashColumns = [
  {
    title: '提现方式',
    dataIndex: 'type',
    scopedSlots: {
      customRender: 'method',
    },
  },
  {
    title: '提现金额',
    scopedSlots: {
      customRender: 'price',
    },
    dataIndex: 'price',
    sorter: (a, b) => a.price - b.price,
  },
  {
    title: '手续费',
    scopedSlots: {
      customRender: 'service_money',
    },
    dataIndex: 'service_money',
    sorter: (a, b) => a.service_money - b.service_money,
  },
  {
    title: '实际打款',
    scopedSlots: {
      customRender: 'money',
    },
    dataIndex: 'money',
    sorter: (a, b) => a.money - b.money,
  },
  {
    title: '审核时间',
    dataIndex: 'created_at',
  },
  {
    title: '状态',
    scopedSlots: {
      customRender: 'status',
    },
  },
]
export default {
  components: {
    ListTable,
    SelectUer
  },
  data() {
    return {
      // tab页当前页
      current: '1',
      // 数据总数
      totalCount: 0,
      cashColumns,
      // 查询参数
      queryParam: {
        pageNo: 1,
      },
      list_th: [
        { type: 'shareOrder', title: '商品信息', span: 7 },
        { type: 'shareOrder', title: '单价/数量', span: 4 },
        { type: 'shareOrder', title: '订单金额', span: 6 },
        { type: 'shareOrder', title: '分销情况', span: 5 },
      ],
      // 当前查询的userid
      user_id: 0,
      // 分销商信息
      userInfo: {},
      // 订单列表
      orderList: [],
      // 提现列表
      cashList: [],
      // 二维码地址
      qrcode_img: '',
      // 展示二维码的弹窗
      qrcode_visiable: false,
      // 设置的备注
      seller_comments: '',
      // 备注的弹窗
      comments_visiable: false,
      editParentModal: false,
      oldParentId: -1,
      oldParentName: '',
      confirmLoading: false
    }
  },
  methods: {
    onSelectUser (user) {
      this.oldParentId = this.userInfo.parent_id
      this.oldParentName = this.userInfo.parent_name
      this.userInfo.parent_name = user.name
      this.userInfo.parent_id = user.id
    },
    onCancel () {
      if (this.oldParentId > -1) {
        this.userInfo.parent_id = this.oldParentId
        this.userInfo.parent_name = this.oldParentName
      }
      this.editParentModal = false
    },
    onSetHead () {
      this.oldParentId = this.userInfo.parent_id
      this.oldParentName = this.userInfo.parent_name
      this.userInfo.parent_id = 0
      this.userInfo.parent_name = '总店'
    },
    handleEditParentConfirm () {
      if (this.oldParentId == -1) {
        this.editParentModal = false
        return
      }
      this.confirmLoading = true
      setParent({ user_id: this.userInfo.id, parent_id: this.userInfo.parent_id }).then(res => {
        if (res.code == 0) {
          this.editParentModal = false
          this.$message.success(res.msg)
        } else {
          this.userInfo.parent_id = this.oldParentId
          this.userInfo.parent_name = this.oldParentName
          this.$message.error(res.msg)
        }
      }).catch(error => {
        console.log(error)
      }).then(() => {
        this.confirmLoading = false
      })
    },
    // 分页请求
    tablePageChange (e) {
      this.queryParam.pageNo = e
      if (this.current == 2) {
        this.getCashList()
      } else if (this.current == 3) {
        this.getOrderList()
      }
    },
    // 切换tab
    changeTab(e) {
      this.queryParam.pageNo = 1
      this.totalCount = 0
      if (e == 2) {
        this.getCashList()
      }
      if (e == 3) {
        this.getOrderList()
      }
    },
    // 获取分销商详情
    async getDetail() {
      const res = await getDetail({ user_id: this.user_id })
      console.log(res)
      this.userInfo = res.data
    },
    // 获取分销订单列表
    async getOrderList() {
      const hide = this.$message.loading('加载中...')
      try {
        const res = await getOrder({ pageNo: this.queryParam.pageNo, user_id: this.user_id })
        if (res.code == 0) {
          this.orderList = res.data.data
          this.totalCount = res.data.totalCount
        }
        hide()
      } catch (error) {
        hide()
      }
    },
    // 获取分销提现列表
    async getCashList() {
      try {
        const res = await getCash({ pageNo: this.queryParam.pageNo, user_id: this.user_id })
        if (res.code == 0) {
          this.cashList = res.data.data
          this.totalCount = res.data.totalCount
        }
      } catch (error) {}
    },
    // 点击展示二维码
    qrcode() {
      var params = {
        user_id: this.user_id,
      }
      getQrcode(params)
        .then((res) => {
          if (res.code !== 0) {
            this.$error({
              content: res.msg,
            })
          } else {
            this.qrcode_img = res.data.url
            this.qrcode_visiable = true
          }
        })
        .catch((err) => {
          this.$message.error(err.message)
        })
    },
    // 设置备注
    setComments() {
      var params = {
        id: this.userInfo.s_id,
        seller_comments: this.seller_comments,
      }
      detailSetComments(params)
        .then((res) => {
          if (res.code !== 0) {
            this.$error({
              content: res.msg,
            })
          } else {
            this.$message.success('备注成功')
            this.getDetail()
          }
          this.seller_comments = ''
          this.comments_visiable = false
        })
        .catch((err) => {
          this.$message.error(err.message)
          this.seller_comments = ''
          this.comments_visiable = false
        })
    },
    showCommons() {
      this.seller_comments = this.userInfo.seller_comments
      this.comments_visiable = true
    }
  },
  mounted() {
    console.log(this.$route.query.id)
    if (this.$route.query.id) {
      this.user_id = this.$route.query.id
      this.getDetail()
    }
  },
}
</script>


<style lang="less" scoped>
.user {
  display: flex;
  align-items: center;
  font-size: 20px;
  margin-bottom: 10px;
  img {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    margin-right: 16px;
  }
}
.content {
  display: flex;
}
.body {
  padding: 24px;
}
</style>